<script setup lang="ts">
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, ref } from 'vue'
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  BarChart,
  CanvasRenderer,
  LegendComponent
])

onMounted(() => {
  init()
})
const chartDom = ref<HTMLElement>()
function init() {
  if (!chartDom.value) return
  const myChart = echarts.init(chartDom.value)
  option && myChart.setOption(option)
}

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}
</script>

<template>
  <div ref="chartDom"></div>
</template>

<style lang="scss" scoped>
div {
  min-width: 300px;
  height: 200px;
}
</style>
